<template>
  <div class="vue3-app">
    <nav class="nav">
      <button 
        :class="['nav-btn', { active: currentPage === 'todo' }]" 
        @click="currentPage = 'todo'"
      >
        Todo List
      </button>
      <button 
        :class="['nav-btn', { active: currentPage === 'blank' }]" 
        @click="currentPage = 'blank'"
      >
        空白页面
      </button>
    </nav>

    <!-- Todo List 页面 -->
    <div v-if="currentPage === 'todo'" class="page">
      <h1>📝 Vue 3 Todo List</h1>
      <div class="add-todo">
        <input 
          v-model="newTodo" 
          @keyup.enter="addTodo"
          placeholder="输入新的待办事项..."
          class="todo-input"
        />
        <button @click="addTodo" class="btn">添加</button>
        <button @click="clearAll" class="btn btn-danger">清空全部</button>
      </div>
      
      <div class="search-filter">
        <input 
          v-model="searchText" 
          placeholder="搜索待办事项..."
          class="todo-input"
        />
        <div class="filter-buttons">
          <button 
            :class="['filter-btn', { active: currentFilterType === 'all' }]"
            @click="currentFilterType = 'all'"
          >
            全部
          </button>
          <button 
            :class="['filter-btn', { active: currentFilterType === 'completed' }]"
            @click="currentFilterType = 'completed'"
          >
            已完成
          </button>
          <button 
            :class="['filter-btn', { active: currentFilterType === 'pending' }]"
            @click="currentFilterType = 'pending'"
          >
            未完成
          </button>
        </div>
      </div>
      
      <ul class="todo-list">
        <li v-if="filteredTodos.length === 0" class="empty-message">
          {{ searchText.trim() ? '没有找到匹配的待办事项' : '暂无待办事项' }}
        </li>
        <li v-for="todo in filteredTodos" :key="todo.id" class="todo-item" :class="{ completed: todo.completed }">
          <template v-if="editingId === todo.id">
            <input 
              v-model="editingText" 
              @keyup.enter="saveEdit(todo.id)"
              @keyup.esc="cancelEdit"
              @blur="saveEdit(todo.id)"
              class="todo-edit-input"
              ref="editInput"
            />
            <div class="todo-actions">
              <button @click="saveEdit(todo.id)" class="btn">保存</button>
              <button @click="cancelEdit" class="btn">取消</button>
            </div>
          </template>
          <template v-else>
            <span class="todo-text" @click="toggleTodo(todo.id)">{{ todo.text }}</span>
            <div class="todo-actions">
              <button @click="startEdit(todo.id, todo.text)" class="btn">编辑</button>
              <button @click="removeTodo(todo.id)" class="btn btn-danger">删除</button>
            </div>
          </template>
        </li>
      </ul>
      
      <p class="todo-stats">
        总计: {{ todos.length }} | 已完成: {{ completedCount }} | 未完成: {{ remainingCount }}
      </p>
    </div>

    <!-- 空白页面 -->
    <div v-if="currentPage === 'blank'" class="page">
      <div class="blank-content">
        <h2>🎨 Vue 3 空白页面</h2>
        <p>这是一个空白页面，你可以在这里练习 Vue 3 + Composition API 开发。</p>
        <p class="hint">提示：编辑 vue3-app/src/App.vue 文件来修改这个页面</p>
        
        <!-- 在这里添加你的 Vue 3 代码 -->
        
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';

export default {
  name: 'Vue3App',
  setup() {
    // 页面状态
    const currentPage = ref('todo');
    
    // Todo 相关
    const newTodo = ref('');
    const todos = ref([]);
    const editingId = ref(null);
    const editingText = ref('');
    const searchText = ref('');
    const currentFilterType = ref('all');
    let todoIdCounter = 1;

    // 计算属性
    const completedCount = computed(() => 
      todos.value.filter(todo => todo.completed).length
    );
    
    const remainingCount = computed(() => 
      todos.value.length - completedCount.value
    );

    const filteredTodos = computed(() => {
      let filtered = todos.value;
      
      // 按状态过滤
      if (currentFilterType.value === 'completed') {
        filtered = filtered.filter(todo => todo.completed);
      } else if (currentFilterType.value === 'pending') {
        filtered = filtered.filter(todo => !todo.completed);
      }
      
      // 按搜索文本过滤
      if (searchText.value.trim()) {
        filtered = filtered.filter(todo => 
          todo.text.toLowerCase().includes(searchText.value.toLowerCase())
        );
      }
      
      return filtered;
    });

    // Todo 方法
    const addTodo = () => {
      if (newTodo.value.trim()) {
        todos.value.push({
          id: todoIdCounter++,
          text: newTodo.value.trim(),
          completed: false
        });
        newTodo.value = '';
      }
    };

    const removeTodo = (id) => {
      const index = todos.value.findIndex(todo => todo.id === id);
      if (index > -1) {
        todos.value.splice(index, 1);
      }
    };

    const toggleTodo = (id) => {
      const todo = todos.value.find(todo => todo.id === id);
      if (todo) {
        todo.completed = !todo.completed;
      }
    };

    const clearAll = () => {
      todos.value = [];
    };

    const startEdit = (id, text) => {
      editingId.value = id;
      editingText.value = text;
    };

    const saveEdit = (id) => {
      if (editingText.value.trim()) {
        const todo = todos.value.find(todo => todo.id === id);
        if (todo) {
          todo.text = editingText.value.trim();
        }
      }
      cancelEdit();
    };

    const cancelEdit = () => {
      editingId.value = null;
      editingText.value = '';
    };

    // 生命周期
    onMounted(() => {
      console.log('Vue 3 应用已加载！');
    });

    // 返回模板需要的数据和方法
    return {
      currentPage,
      newTodo,
      todos,
      editingId,
      editingText,
      searchText,
      currentFilterType,
      completedCount,
      remainingCount,
      filteredTodos,
      addTodo,
      removeTodo,
      toggleTodo,
      clearAll,
      startEdit,
      saveEdit,
      cancelEdit
    };
  }
};
</script>

<style scoped>
.vue3-app {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
}

.nav {
  background: #4fc08d;
  padding: 0;
  display: flex;
}

.nav-btn {
  background: none;
  border: none;
  color: white;
  padding: 15px 25px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}

.nav-btn:hover {
  background: rgba(255,255,255,0.1);
}

.nav-btn.active {
  background: rgba(255,255,255,0.2);
}

.page {
  padding: 30px;
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

.add-todo {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.todo-input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.btn {
  background: #4fc08d;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-right: 10px;
}

.btn:hover {
  background: #42a085;
}

.btn-danger {
  background: #dc3545;
}

.btn-danger:hover {
  background: #c82333;
}

.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 20px;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 8px;
  background: #f8f9fa;
}

.todo-item.completed {
  opacity: 0.6;
}

.todo-item.completed .todo-text {
  text-decoration: line-through;
}

.todo-text {
  flex: 1;
  cursor: pointer;
  padding: 5px;
}

.todo-edit-input {
  flex: 1;
  padding: 8px;
  border: 1px solid #4fc08d;
  border-radius: 4px;
  font-size: 16px;
}

.todo-actions {
  display: flex;
  gap: 5px;
}

.todo-stats {
  margin-top: 20px;
  color: #666;
  text-align: center;
}

.blank-content {
  text-align: center;
  color: #666;
  padding: 50px;
}

.blank-content h2 {
  margin-bottom: 15px;
  color: #4fc08d;
}

.hint {
  margin-top: 20px;
  font-size: 14px;
  color: #999;
}

.search-filter {
  margin: 15px 0;
}

.filter-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

.filter-btn {
  background: #f8f9fa;
  color: #333;
  border: 1px solid #ddd;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.filter-btn:hover {
  background: #e9ecef;
}

.filter-btn.active {
  background: #4fc08d;
  color: white;
  border-color: #4fc08d;
}

.empty-message {
  text-align: center;
  color: #666;
  padding: 20px;
  font-style: italic;
}
</style>
